<template>
	<view class="content" v-if="item">
		<view class="cake-item" @click="handleDetail">
				<view >
					<image class="poster" :src="item.img" mode=""></image>
					
				</view>
				<view class="info-cont flex align-center justify-between">
					<view>
						<view class="fs-18">
							{{item.name}}
						</view>
						<view class="fs-14">
							{{item.french}}
						</view>
						
					</view>
					<view @click.stop="handleCartadd" class="cart-btn margin-right-sm">
						<text class="iconfont icon-gouwuche"></text>
					</view>
				</view>
				<view class="fs-16">
					<text class="fs-12">￥</text>
					{{item.price}}
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				typeof:Object,
				default:null
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			handleDetail(){
				// this.item = JSON.stringify(this.item)
				// uni.navigateTo({
				// 	url:`/pages/detail/detail?item=${JSON.stringify(this.item)}`,
				// })
				uni.navigateTo({
					url:`/pages/detail/detail?id=${this.item.id}`,
				})
			},
			handleCartadd(){
					
				this.$store.commit('cart/cartAddMut',{
					...this.item,
					idx:0
				})
			}
		},
		mounted() {
			// console.log(this.item)
		}
	}
</script>

<style lang="scss" scoped>
.content{
	display: flex;
	flex-wrap: wrap;
	// padding: 20upx;
}
.cake-item{
	width: 350upx;
	margin-left:20upx ;
	.poster{
		width: 100%;
		height: 350upx;
		background-color: #f5f5f5;
	}
		
	.fs-18{
		margin-top:18upx ;
	}
	.fs-14{
		margin: 10upx 0;
	}
	.fs-16{
		margin-bottom: 16upx ;
	}
}
.cart-btn{
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
	background-color: #ffe32a;
	text-align: center;
	line-height: 60upx;
}
</style>

